<template>
  <div class="fastchoose border-bottom">
    <div class="row1">
      <fastchoose-color  ref="color" @click="updateColorCondition"></fastchoose-color>
      <fastchoose-bigsmall ref="bigsmall" @click="updateBigsmallCondition"></fastchoose-bigsmall>
    </div>
    <div class="row2">
      <fastchoose-animal @click="updateShengxiaoCondition"></fastchoose-animal>
    </div>
  </div>
</template>

<script>
import fastchooseColor from '@/components/base/fastchoose-buttons/common/fastchoose-color'
import fastchooseBigsmall from '@/components/base/fastchoose-buttons/common/fastchoose-bigsmall'
import fastchooseAnimal from '@/components/base/fastchoose-buttons/common/fastchoose-animal'
export default {
  components: {
    fastchooseColor,
    fastchooseBigsmall,
    fastchooseAnimal
  },
  data() {
    return {
      bigsmallCondition: '',
      colorCondition: '',
      shengxiaoCondition: ''
    }
  },
  methods: {
    updateBigsmallCondition(condition) {
      this.bigsmallCondition = condition 
      this.$emit('click', this.colorCondition + this.bigsmallCondition)
    },
    updateColorCondition(condition) {
      this.colorCondition = condition
      this.$emit('click', this.colorCondition + this.bigsmallCondition)
    },
    updateShengxiaoCondition(condition) {
      this.bigsmallCondition = ''
      this.colorCondition = ''
      console.log(this.$refs.bigsmall.clearState, this.$refs.color.clearState)
      this.$refs.color.clearState()
      this.$refs.bigsmall.clearState()
      this.$emit('click', condition)

    }
  }
}
</script>

<style lang="stylus" scoped>
  .row1 >>> .btn-row 
    .btn-item 
      margin-right 7px 
      box-sizing border-box
    &:first-child 
      .btn-item 
        width 60px
        &:last-child 
          margin-right 0
    &:nth-child(2)
      margin-left 16px 
      .btn-item 
        width 45px
        &:nth-child(4) 
          margin-right 0
        &:nth-child(5) 
          margin-left 16px
          width 80px
        &:last-child 
          width 80px
  .row2 >>> .btn-row 
    .btn-item 
      margin-right 7px 
      width 43px
      box-sizing border-box
  .fastchoose 
    box-sizing border-box 
    padding 5px 20px
    .row1
      display flex 
    .row2 
      display flex 
        
    
</style>